<template>
  
  <n-spin class="yzspin" :show="val.show">


    <template #description>
      <div class="yzdiv"><br />{{ val.loading_text }}</div>
    </template>
    <div class="dljjc_box3_x" content-style="padding:0;">
      <!-- 刀型冠军组件 -->
      <component wd="900" :is="cfg.model" v-model:window_open="val.md_player_top" :title="`刀型等级排名`">
        <template #content>
          <component :is="comp.player_top.comp" :val="val" :ct="ct" />
        </template>
      </component>


      <!-- 刀型玩家排名组件 -->
      <component wd="900" :is="cfg.model" v-model:window_open="val.md_player_alllist" :title="`刀型记录`">
        <template #content>
          <component :is="comp.player_alllist.comp" :val="val" :ct="ct" />
        </template>
      </component>

      <!-- 玩家查刀组件 -->
      <component wd="900" :is="cfg.model" v-model:window_open="val.md_player_dao" :title="`成员出刀记录`">
        <template #content>
          <component :is="comp.player_dao.comp" :val="val" :ct="ct" />
        </template>
      </component>
      <!-- 普通菜单 -->
      <n-scrollbar x-scrollable>
        <n-space justify="center" class="report_tab">
          <div style="
                display: flex;
                flex-flow: wrap;
                white-space: nowrap;
                gap: 8px 12px;
                padding-right: 12px;
                flex-direction: row;
                flex-wrap: nowrap;
              ">

            <template v-for="item in val.select">

              <n-select v-if="(item.s2ban == true && val.qs?.season >= 2000) == false"
                :style="`min-width: ${cfg.mobile ? 10 : 15}rem`" :size="cfg.mobile ? 'small' : ''"
                v-model:value="val.qs[item.val]" :options="val.op[item.val]" :placeholder="item.tips"
                @update:value="ct.get_dx" />
            </template>
            <!-- 角色筛选 -->
            <el-select :style="`min-width: ${cfg.mobile ? 10 : 15}rem`" :size="cfg.mobile ? 'small' : ''"
              style="min-width: 12rem" :reserve-keyword="false" filterable placeholder="请选择" v-model="val.qs.role"
              @change="ct.get_dx">
              <el-option v-for="(item, key) in cfg.role" :label="item.name" :value="item.icon">
                <div style="
              display: flex;
              align-items: center;
              margin-top: 3px;
              margin-bottom: 3px;
            ">
                  <img class="workairole" :src="cfg.function.ava(item.icon)" />
                  <span>　{{ item.name }}</span>
                </div>
              </el-option>
            </el-select>
          </div>
        </n-space>
      </n-scrollbar>
      <n-hr />
      <!-- 数据列表 -->
      <n-pagination :page="Number(val.qs.page)" :on-update:page="ct.page" :page-count="val.maxlimit"
        :page-slot="val.pgs" />
      <br />
      <div class="top_div">
        <n-grid :y-gap="cfg.mobile == false ? 15 : 6" :x-gap="cfg.mobile == false ? 15 : 6"
          :cols="cfg.mobile == false ? parseInt(cfg.sswd / 215) : cfg.sswd >= 350 ? 2 : 1">
          <template v-for="item in val.data">
            <n-gi>

              <div class="top_div-box2">
                <div class="top_raid-box">
                  <div class="top_raid-pa"># {{ item.top }}</div>
                  <p class="_p4">{{ item.boss }}</p>
                  <n-flex justify="center" :style="`gap:${cfg.mobile == false ? 8 : 3}px`">
                    <img style="width: 35px" :src="cfg.function.ava(icon)" v-for="icon in item.icon?.split(',')" />
                  </n-flex>
                  <n-hr style="width: 100%; margin-top: 10px; margin-bottom: 0px"></n-hr>

                  <n-hr style="margin-top: 0px; margin-bottom: 5px"></n-hr>
                  <n-grid class="ngrid" :cols="3">
                    <n-gi>
                      <n-statistic label="刀数" :value="item.count" />
                    </n-gi>
                    <n-gi>
                      <n-statistic label="均伤" :value="parseInt(item.data.avg / 10000)" />
                    </n-gi>
                    <n-gi>
                      <n-statistic label="最高" :value="parseInt(item.data.max_damage / 10000)" />
                    </n-gi>
                  </n-grid>

                  <div style="margin-top:10px;"><span :style="`font-size: ${cfg.mobile == false ? 12 : 9.5}px`">（冠军）{{
                      item.data.max_user }}</span>　<n-button size="tiny"
                      @click="ct.click_player_top(item.key, val.qs.season, item.icon)">排名</n-button></div>
                  <n-hr style="width: 100%; margin-top: 10px; margin-bottom: 10px"></n-hr>
                  <p class="_p3" :style="`font-size: ${cfg.mobile == false ? 13 : 9.5}px`">
                  <div>累计伤害 {{ item.damage?.toLocaleString() }}</div>
                  </p>
                </div>
              </div>
            </n-gi>
          </template>
        </n-grid>
      </div>
      <br />
      <!-- 数据列表 -->
      <n-pagination :page="Number(val.qs.page)" :on-update:page="ct.page" :page-count="val.maxlimit"
        :page-slot="val.pgs" />
      <br />
    </div>
  </n-spin>
</template>

<script>
//2024/05/17 猫燐
import { cfg } from "@/cfg/cfg.js";
import { getrole } from "@/cfg/function.js";
import player_dao from "./team_rank/player_dao.vue";
import player_top from "./team_rank/player_top.vue";
import player_alllist from "./team_rank/player_alllist.vue";
export default {
  setup() {

    const comp = {
      player_top: {
        comp: player_top,
        mdname: "md_player_top",
        text: {
          title: "刀型冠军排名",
        },
      },
      player_alllist: {
        comp: player_alllist,
        mdname: "md_player_alllist",
        text: {
          title: "刀型玩家排名",
        },
      },
      player_dao: {
        comp: player_dao,
        mdname: "md_player_dao",
        text: {
          title: "玩家出刀记录",
        },
      },
    };


    let ct = reactive({});
    ct.page = (page) => {
      val.qs.page = page;
      ct.get_dx();
    }
    ct.player_dao = async (uid, season, bid) => {
      val.md_player_dao = true;
      val.player_dao = {
        uid: uid,
        bid: bid,
        season: season,
      };
    };
    ct.click_player_all_top_inf = async () => {
      val.show = false;
      val.show2 = true;
      val.pt_page++;
      const res = await cfg.axios.get(`${cfg.url}`, {
        params: {
          t: "get/auto/gf_dx_player",
          type: 'lvtop',
          page: val.pt_page,
          season: val.qs.season,
          key: val.save_key,
          level: val.pt_level,
        },
      });
      const data = res.data;
      for (data.data.data of data.data.data) {
        val.pt2_data.push(data.data.data);
      }
      val.show2 = false;
    };

    ct.click_player_all_top = (level) => {
      val.show = true;
      val.pt_page = 0;
      val.pt2_data = [];
      val.pt_level = level;
      val.loading_text = `[Loading] 加载玩家排名数据中... ( ${val.sepint} / ${val.maxint} )`;
      val.md_player_alllist = true;
    };

    ct.click_player_top = async (key, season, icon) => {
      val.show = true;
      val.save_icon = icon;
      val.save_key = key;
      val.loading_text = `[Loading] 加载刀型数据中... ( ${val.sepint} / ${val.maxint} )`;
      const res = await cfg.axios.get(`${cfg.url}`, {
        params: {
          t: "get/auto/gf_dx_player",
          type: 'lvlist',
          season: season,
          key: key,
        },
      });
      const data = res.data;
      val.pt_data = data.data;
      if (val.qs.season >= 2000) {
        ct.click_player_all_top('94-100');
      } else {
        val.md_player_top = true;
      }
      val.show = false;
    };
    //获取刀型数据
    ct.get_dx = async () => {
      try {
        val.show = true;
        const res = await cfg.axios.get(`${cfg.url}`, {
          params: {
            t: "get/auto/gf_dx",
            ...val.qs,
          },
        });
        const data = res.data;
        if (data.code == -1) {
          if (data.msg == "本期数据无法查看，无法在新版缓存数据中运行。") {
            val.op.boss = [];
            val.data = [];
            val.maxlimit = 0;
            cfg.msg.error(data.msg);
            cfg.msg.error(data.msg);
            val.show = false;
          }
          if (data.msg == "数据未初始化") {
            val.loading_text = `[Loading] 数据未初始化，正在尝试初始化数据。... ( ${val.sepint} / ${val.maxint} )`;
            const res2 = await cfg.axios.get(`${cfg.url}`, {
              params: {
                t: "get/auto/gf_dx_upd",
                type: "user_upd",
                ...val.qs,
              },
            });
            const data2 = res2.data;
            if (data2.code == -1) {
              if (data.msg != "不需要更新") {
                alert(data2.msg);
                val.show = false;
                return false;
              }
            }
            val.loading_text = `[Loading] ${data2.msg}... ( ${val.sepint} / ${val.maxint} )`;
            ct.get_dx();
          }
        }
        val.op.boss = [];
        for (let key in data.data.bosslist) {
          val.op.boss.push({
            value: key,
            label: key,
          });
        }

        val.maxlimit = data.data.maxlimit;
        val.op.lv = [{
          value: '94-100',
          label: '等级 94+ 同防御 ',
        }];
        console.log(data.data.data);
        for (let key in data.data.lvlist) {
          if (data.data.lvlist[key] < 94) {
            val.op.lv.push({
              value: data.data.lvlist[key],
              label: `等级 ${data.data.lvlist[key]}`,
            });
          }
        }
        val.data = data.data.data;
        val.save_lv = data.data.lv;
        val.show = false;
        return true;
      } catch (error) {
        val.show = false;
        return false;
      }
    };

    let val = reactive({
      md_player_top: false,
      pt_data: [],
      coldw: cfg.mobile == true ? 250 : 250,
      pgwd: cfg.mobile == true ? 45 : 45,
      col: 1,
      colwd: 1,
      pt2_data: [],
      sepint: 0,
      save_key: null,
      maxint: 3,
      maxlimit: 0,
      show: true,
      loading_text: "加载中(text)",
      //选择菜单选中
      qs: {
        season: null,
        sort: "sort_damage",
        role: null,
        lv: null,
        page: 1,
      },
      //选择菜单列表
      op: {
        season: [],
        sort: [
          {
            value: "sort_limit",
            label: `数量排序`,
          },
          {
            value: "sort_damage",
            label: `伤害排序`,
          },
        ],
        lv: [],
        boss: [],
      },
    });

    val.select = [
      {
        tips: "选择赛季",
        op: val.op.season,
        val: "season",
        width: 15,
      },
      {
        tips: "刀型排序",
        op: val.op.sort,
        val: "sort",
        width: 6,
      },
      {
        tips: "指定等级",
        op: val.op.lv,
        val: "lv",
        s2ban: true,
        width: 12,
      },
      {
        tips: "选择boss",
        op: val.op.boss,
        val: "boss",
        width: 9,
      },
    ];

    //初始化
    onMounted(async () => {
      val.sepint++;
      val.loading_text = `[Loading] 读取赛季信息中... ( ${val.sepint} / ${val.maxint} )`;
      await cfg.function.season_list();
      val.op.season = cfg.season.select;
      if (cfg.route.query.season != null) {
        //指定query的赛季
        val.qs.season = cfg.route.query.season;
      } else {
        //默认指定最新赛季
        val.qs.season = cfg.season.select[0].value;
      }
      val.sepint++;
      val.loading_text = `[Loading] 读取角色数据中... ( ${val.sepint} / ${val.maxint} )`;
      if (!cfg?.role) {
        await getrole();
      }
      //如果角色数据没有icon重新加载
      if (cfg.role[0].icon == null) {
        await getrole();
      }
      val.sepint++;
      val.loading_text = `[Loading] 检查刀型数据中... ( ${val.sepint} / ${val.maxint} )`;
      //检查刀型数据
      await ct.get_dx();
      val.qs.lv = val.op.lv[0].value;
      val.show = false;
      const layBodyElement = document.querySelector(".v2_body");
      cfg.sswd = layBodyElement.offsetWidth;
      val.col = parseInt(cfg.sswd / val.coldw);
      val.pgs = parseInt(cfg.sswd / val.pgwd);
    });

    watch(
      () => cfg.sswd,
      (newWidth, oldWidth) => {
        val.col = parseInt(cfg.sswd / val.coldw);
        val.pgs = parseInt(cfg.sswd / val.pgwd);
      }
    );

    return {
      cfg,
      val,
      ct,
      comp,
    };
  },
};
</script>
